<template>
  <div>
    <base-header type="gradient-success" class="pb-6 pb-8 pt-5 pt-md-7"></base-header>
    <notifications></notifications>
    <div class="container-fluid mt--7">
      <div class="card shadow">
        <card type="frame">添加您的诗词内容</card>
        <div class="card-header border-0">
          <div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label form-control-label">古诗标题</label>
              <div class="col-md-10">
                <base-input placeholder="请输入古诗标题" v-model="model.anctitle"></base-input>
              </div>
            </div>
            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >作者</label>
              <div class="col-md-10">
                <base-input placeholder="请输入作者" v-model="model.ancauthor"></base-input>
              </div>
            </div>
            <div class="form-group row">
              <label for="example-email-input" class="col-md-2 col-form-label form-control-label">朝代</label>
              <div class="col-md-10">
                <base-input type="text" v-model="model.ancdynasty" />
              </div>
            </div>
             <div class="form-group row">
              <label for="example-email-input" class="col-md-2 col-form-label form-control-label">年级</label>
              <div class="col-md-10">
                <base-input type="text" v-model="model.grade" />
              </div>
            </div>
            <div class="form-group row">
              <label for="example-url-input" class="col-md-2 col-form-label form-control-label">诗句</label>
              <div class="col-md-4">
                <base-input type="text" placeholder="请输入诗句1" v-model="model.ancword1" />
              </div>
              <label for="example-url-input" class="col-md-1 col-form-label form-control-label">考题下标</label>
              <div class="col-md-4">
                <base-input
                  type="text"
                  placeholder="请输入诗句中需要隐藏的字符下标从0开始"
                  v-model="model.ancword1qindex"
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="example-tel-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-4">
                <base-input type="text" placeholder="请输入诗句2" v-model="model.ancword2" />
              </div>
              <label for="example-tel-input" class="col-md-1 col-form-label form-control-label">考题下标</label>
              <div class="col-md-4">
                <base-input
                  type="text"
                  placeholder="请输入诗句中需要隐藏的字符下标从0开始"
                  v-model="model.ancword2qindex"
                />
              </div>
            </div>
            <div class="form-group row">
              <label
                for="example-password-input"
                class="col-md-2 col-form-label form-control-label"
              ></label>
              <div class="col-md-4">
                <base-input type="text" placeholder="请输入诗句3" v-model="model.ancword3" />
              </div>
              <label
                for="example-password-input"
                class="col-md-1 col-form-label form-control-label"
              >考题下标</label>
              <div class="col-md-4">
                <base-input
                  type="text"
                  placeholder="请输入诗句中需要隐藏的字符下标从0开始"
                  v-model="model.ancword3qindex"
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="example-number-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-4">
                <base-input type="text" placeholder="请输入诗句4" v-model="model.ancword4" />
              </div>
              <label
                for="example-number-input"
                class="col-md-1 col-form-label form-control-label"
              >考题下标</label>
              <div class="col-md-4">
                <base-input
                  type="text"
                  placeholder="请输入诗句中需要隐藏的字符下标从0开始"
                  v-model="model.ancword4qindex"
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="example-number-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-4">
                <base-input type="text" placeholder="请输入诗句5" v-model="model.ancword5" />
              </div>
              <label
                for="example-number-input"
                class="col-md-1 col-form-label form-control-label"
              >考题下标</label>
              <div class="col-md-4">
                <base-input
                  type="text"
                  placeholder="请输入诗句中需要隐藏的字符下标从0开始"
                  v-model="model.ancword5qindex"
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="example-number-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-4">
                <base-input type="text" placeholder="请输入诗句6" v-model="model.ancword6" />
              </div>
              <label
                for="example-number-input"
                class="col-md-1 col-form-label form-control-label"
              >考题下标</label>
              <div class="col-md-4">
                <base-input
                  type="text"
                  placeholder="请输入诗句中需要隐藏的字符下标从0开始"
                  v-model="model.ancword6qindex"
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="example-number-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-4">
                <base-input type="text" placeholder="请输入诗句7" v-model="model.ancword7" />
              </div>
              <label
                for="example-number-input"
                class="col-md-1 col-form-label form-control-label"
              >考题下标</label>
              <div class="col-md-4">
                <base-input
                  type="text"
                  placeholder="请输入诗句中需要隐藏的字符下标从0开始"
                  v-model="model.ancword7qindex"
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="example-number-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-4">
                <base-input type="text" placeholder="请输入诗句8" v-model="model.ancword8" />
              </div>
              <label
                for="example-number-input"
                class="col-md-1 col-form-label form-control-label"
              >考题下标</label>
              <div class="col-md-4">
                <base-input
                  type="text"
                  placeholder="请输入诗句中需要隐藏的字符下标从0开始"
                  v-model="model.ancword8qindex"
                />
              </div>
            </div>
            <div class="form-group row" v-show="showSaveBtn">
              <label for="example-time-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-10">
                <base-button type="success" @click="saveAncient()">
                  <i class="ni ni-send"></i>提交
                </base-button>
              </div>
            </div>
            <div class="form-group row" v-show="showUpdateBtn">
              <label for="example-time-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-10">
                <base-button type="success">
                  <i class="ni ni-send"></i>更新
                </base-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import validate from "~/config/utils/validate";
import { saveGameAncientSubjectApi } from "~/config/api/ancientservice";
export default {
  asyncData() {},
  head: {
    title: "添加诗词"
  },
  name: "tables",
  data() {
    return {
      showSaveBtn: false,
      showUpdateBtn: false,
      model: {
        anctitle: "",
        ancauthor: "",
        ancdynasty: "",
        grade:"",
        ancword1: "",
        ancword1qindex: "",
        ancword2: "",
        ancword2qindex: "",
        ancword3: "",
        ancword3qindex: "",
        ancword4: "",
        ancword4qindex: "",
        ancword5: "",
        ancword5qindex: "",
        ancword6: "",
        ancword6qindex: "",
        ancword7: "",
        ancword7qindex: "",
        ancword8: "",
        ancword8qindex: ""
      }
    };
  },
  created: function() {
    let pageaction = this.$route.params.action;
    if (pageaction == "save") {
      this.showSaveBtn = true;
    }
    if (pageaction == "edit") {
      this.showUpdateBtn = true;
    }
  },
  mounted: function() {},
  methods: {
    async saveAncient() {
      if (!validate.required(this.model.anctitle)) {
        this.$notify({
          type: "warning",
          verticalAlign: "top",
          horizontalAlign: "center",
          message: "请输入故事标题"
        });
        return false;
      }
      let ancitems = [];
      if (validate.required(this.model.ancword1)) {
        let diss = this.model.ancword1qindex.split("");
        let answers = [];
        let words = this.model.ancword1.split("");
        for (let i in diss) {
          let index = diss[i];
          answers.push(words[index]);
        }
        let data = {
          sence: this.model.ancword1,
          disappearindex: JSON.stringify(diss),
          answer: JSON.stringify(answers)
        };
        ancitems.push(data);
      }
      if (validate.required(this.model.ancword2)) {
        let diss = this.model.ancword2qindex.split("");
        let answers = [];
        let words = this.model.ancword2.split("");
        for (let i in diss) {
          let index = diss[i];
          answers.push(words[index]);
        }
        let data = {
          sence: this.model.ancword2,
          disappearindex: JSON.stringify(diss),
          answer: JSON.stringify(answers)
        };
        ancitems.push(data);
      }
      if (validate.required(this.model.ancword3)) {
        let diss = this.model.ancword3qindex.split("");
        let answers = [];
        let words = this.model.ancword3.split("");
        for (let i in diss) {
          let index = diss[i];
          answers.push(words[index]);
        }
        let data = {
          sence: this.model.ancword3,
          disappearindex: JSON.stringify(diss),
          answer: JSON.stringify(answers)
        };
        ancitems.push(data);
      }
      if (validate.required(this.model.ancword4)) {
        let diss = this.model.ancword4qindex.split("");
        let answers = [];
        let words = this.model.ancword4.split("");
        for (let i in diss) {
          let index = diss[i];
          answers.push(words[index]);
        }
        let data = {
          sence: this.model.ancword4,
          disappearindex: JSON.stringify(diss),
          answer: JSON.stringify(answers)
        };
        ancitems.push(data);
      }
      if (validate.required(this.model.ancword5)) {
        let diss = this.model.ancword5qindex.split("");
        let answers = [];
        let words = this.model.ancword5.split("");
        for (let i in diss) {
          let index = diss[i];
          answers.push(words[index]);
        }
        let data = {
          sence: this.model.ancword5,
          disappearindex: JSON.stringify(diss),
          answer: JSON.stringify(answers)
        };
        ancitems.push(data);
      }
      if (validate.required(this.model.ancword6)) {
        let diss = this.model.ancword6qindex.split("");
        let answers = [];
        let words = this.model.ancword6.split("");
        for (let i in diss) {
          let index = diss[i];
          answers.push(words[index]);
        }
        let data = {
          sence: this.model.ancword6,
          disappearindex: JSON.stringify(diss),
          answer: JSON.stringify(answers)
        };
        ancitems.push(data);
      }
      if (validate.required(this.model.ancword7)) {
        let diss = this.model.ancword7qindex.split("");
        let answers = [];
        let words = this.model.ancword7.split("");
        for (let i in diss) {
          let index = diss[i];
          answers.push(words[index]);
        }
        let data = {
          sence: this.model.ancword7,
          disappearindex: JSON.stringify(diss),
          answer: JSON.stringify(answers)
        };
        ancitems.push(data);
      }
      if (validate.required(this.model.ancword8)) {
        let diss = this.model.ancword8qindex.split("");
        let answers = [];
        let words = this.model.ancword8.split("");
        for (let i in diss) {
          let index = diss[i];
          answers.push(words[index]);
        }
        let data = {
          sence: this.model.ancword8,
          disappearindex: JSON.stringify(diss),
          answer: JSON.stringify(answers)
        };
        ancitems.push(data);
      }
      let params = {
        anctitle: this.model.anctitle,
        ancauthor: this.model.ancauthor,
        ancdynasty: this.model.ancdynasty,
        ancitemcontent: JSON.stringify(ancitems),
        grade:this.model.grade
      };
      await saveGameAncientSubjectApi(params).then(res => {
        if (res.sucflag) {
          this.$notify({
            type: "info",
            verticalAlign: "top",
            horizontalAlign: "center",
            message: "诗词添加成功"
          });
          this.$router.push("/ancientslist");
        }
      });
    }
  },
  layout: "DashboardLayout"
};
</script>
<style></style>
